<template>
  <div class="login-box">
    <div class="login-logo">
      <b>商城</b> - <small>后台管理系统</small>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
      <p class="login-box-msg">登录系统</p>
      <div class="form-group has-feedback">
        <input type="email" class="form-control" v-model="username" placeholder="用户名">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" v-model="password" @keyup.enter="handleLogin" placeholder="密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <el-row>
        <el-col :span="16">
          <el-checkbox v-model="checked">记住我</el-checkbox>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" class="loginBtn" @click="handleLogin">登录</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import * as Auth from 'common/auth'

  export default {
    name: 'login',
    beforeCreate() {
      if (Auth.hasLogin()) {
        this.$router.replace('/')
      }
    },
    data() {
      return {
        // username: this.getCookie('username'),
        username: this.getCookie('username'),
        password: this.getCookie('password'),
        checked: true
      }
    },
    methods: {
      setCookie(cname, cvalue) {
        var d = new Date();
        d.setTime(d.getTime() + 365 * 24 * 60 * 60 * 1000);
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires;
      },
      getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i].trim();
          if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
      },
      removeCookie(cname) {
        document.cookie = cname + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
      },
      handleLogin() {
        if (this.checked) {
          this.setCookie('username', this.username);
          this.setCookie('password', this.password);
        } else {
          this.removeCookie('username');
          this.removeCookie('password');
        }
        if (this.username === '' || this.password === '') {
          this.$message({
            title: '提醒',
            message: '请输入完整信息',
            type: 'warning'
          })
          return
        }

        Auth.login(this.username, this.password, response => {
          this.$router.replace('/')
          setTimeout(() => {
            window.$.AdminLTE.layout.fix()
          }, 1)
        })
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  li {
    display: inline-block;
    margin: 0 10px;
  }
  
  a {
    color: #42b983;
  }
  
  .loginBtn {
    width: 100px;
    float: right;
  }
</style>